<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="菜单类型:" prop="menuType">
          <hey-select @change="changeLvl" v-model="formModel.menuType" clcd="menu_type_cd"/>
        </el-form-item>
        <el-form-item class="no-warn-item" label="菜单名称:" prop="menuName">
          <el-input
            v-model="formModel.menuName"
            placeholder="菜单名称"
            class="filter-item filter-200"
            clearable
            :disabled="disableName"
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" v-if="hasPermission('menu_select')" plain @click="queryList">查询</el-button>
            <el-button type="primary" v-if="hasPermission('menu_add')" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="menuId"
        :key="Math.random()"
        max-height="500"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          label="序号"
          type="index"
          width="60"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ (pagination.pageNum-1)*pagination.pageSize+scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="menuName"
          label="菜单名称"
          width="260"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="menuTypeLable"
          label="菜单类型"
          width="80"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="menuPath"
          label="菜单路径"
          width="200"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="menuComponent"
          label="菜单组件"
          width="200"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="sortNum"
          label="菜单序号"
          width="80"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="permissionCode"
          label="权限码"
          width="180"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="parentName"
          label="父节点名称"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createUsername"
          label="创建人"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="lastUpdateTime"
          width="160"
          label="最后修改时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="lastUpdateUsername"
          width="160"
          label="最后修改人"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span class="hey_tools_btn" v-if="hasPermission('menu_edit')" @click="handleEdit(row)">编辑</span>
            <span class="hey_tools_btn" v-if="hasPermission('menu_del')" @click="handleDelete(row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination" type="flex" justify="end">
      <el-pagination
        :current-page.sync="pagination.pageNum"
        :page-sizes="pageSizes"
        :page-size.sync="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="reqData"
        @current-change="reqData"
      />
    </el-row>
    <el-dialog
      v-dialogDrag
      v-if="dialogVisible"
      :close-on-click-modal="false"
      title="菜单信息"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <menu-mnt :page-type="operType" :edit-data="editData" @mntSuc="queryList"/>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'MenuList',
    components: {
      MenuMnt: () => import('./menu-mnt')
    },
    data() {
      return {
        dialogVisible: false,
        disableName: true,
        queryParam: {},
        operType: '',
        transId: '',
        total: 0,
        editData: {},
        pagination: {
          pageNum: 1, // 多页查询跳转页码
          pageSize: 10 // 多页查询每页笔数
        },
        pageSizes: [10, 20, 50, 100],
        tableData: [],
        formModel: {
          menuName: '',
          menuType: '',
          isDelete: '0'
        },
      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      changeLvl(value){
        if(value){
          this.disableName = false
        }else{
          this.formModel.menuName = ''
          this.disableName = true
        }
      },
      async queryList() {
        const param = this.cloneDeep(this.formModel)
        this.queryParam = param
        this.transId = '/menu/queryMenus'
        Object.assign(this.pagination, {
          pageNum: 1
        })
        return await this.reqData()
      },
      async reqData() {
        const { transId, queryParam, pagination} = this
        //清空表格
        this.tableData.splice(0, this.tableData.length)
        await this.getPage(transId, queryParam, pagination.pageSize, pagination.pageNum, {
          showLoading: false
        }).then(ret => {
          const grpData = ret.list
          if (Array.isArray(grpData)) {
            this.tableData.splice(0, this.tableData.length, ...grpData)
          } else {
            this.tableData.splice(0, this.tableData.length)
          }
          this.total = ret.total || 0
          this.total *= 1
          pagination.pageSize = ret.pageSize
          pagination.pageNum = ret.pageNum
        }).catch(err => {
          console.log('err', err)
          this.tableData.splice(0, this.tableData.length)
          this.total = 0
        })
      },
      handleAdd() {
        this.operType = 'add'
        this.dialogVisible = true
      },
      handleEdit(row) {
        this.dialogVisible = true
        this.operType = 'edit'
        this.editData = row || {}
      },
      handleDelete(row) {
        this.$sure('确认删除？', _ => {
          this.post('/menu/maintainMenu', {menuId: row.menuId, operateType: '03'}).then(_ => {
            this.$info('删除成功', this.queryList)
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    margin-top: 10px;
  }
</style>
